import { useState } from "react"
import { Card, Form, Input, Button, Checkbox, message } from "antd"
import { useDispatch } from "react-redux"
import { useHistory } from "react-router-dom"
import { login } from "@/store/actions"
import logo from "../../assets/images/logo.png"
import "./index.scss"

const Login = () => {
  // 表单
  const formRules = {
    mobile: [
      {
        pattern: /^1[3-9]\d{9}$/,
        message: "手机号码格式不对",
        validateTrigger: "onBlur"
      },
      { required: true, message: "请输入手机号" }
    ],
    code: [
      { len: 6, message: "验证码6个字符", validateTrigger: "onBlur" },
      { required: true, message: "请输入验证码" }
    ],
    box: [{ required: true, validator: (_, value) => (value ? Promise.resolve() : Promise.reject(new Error("请勾选协议"))) }]
  }
  const initialValues = {
    mobile: "13911111111",
    code: "246810",
    remember: true
  }
  // 登录
  const [isLoading, setLoading] = useState(false)
  const dispatch = useDispatch()
  const history = useHistory() //获取路由跳转方法
  const onFinish = async (val) => {
    const { mobile, code } = val
    try {
      // 异步操作redux
      setLoading(() => true)
      await dispatch(login(mobile, code))
      setLoading(() => false)
      history.replace("/home")
    } catch (e) {
      setLoading(() => false)
      message.error(e.response?.data?.message || "登录失败")
    }
    // 同步操作redux
    dispatch({ type: "tools", payload: "1111" })
  }
  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="" />
        {/* 登录表单 */}
        <Form labelCol={{ span: 4 }} initialValues={initialValues} onFinish={onFinish} validateTrigger={["onBlur", "onChange"]}>
          <Form.Item label="手机号" name="mobile" rules={formRules.mobile}>
            <Input size="large" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item label="验证码" name="code" rules={formRules.code}>
            <Input size="large" placeholder="请输入验证码" />
          </Form.Item>
          {/*
      	此处需要将 valuePropName 属性值设置为 checked，也就是下面设置的内容
      	原因：Form.Item 默认操作的是 value 属性，所以，如果 Form.Item 的子节点的值不是 value ，就需要设置为它自己的值
      			比如，Checkbox 组件操作的是 checked，因此，需要将 valuePropName 设置为 "checked"
      */}
          <Form.Item rules={formRules.box} label="协议" name="remember" valuePropName="checked">
            <Checkbox className="login-checkbox-label">我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
          </Form.Item>
          <Form.Item>
            <Button type="primary" loading={isLoading} htmlType="submit" size="large" block>
              登录
            </Button>
          </Form.Item>
          {/* 1. 表单校验时 Form.Item 可以没有 name 属性吗？ 不可以
2. 什么情况下需要添加 Form.Item 的 valuePropName 属性？ 简单来说，表单元素受控时，操作的不是 value 属性就需要通过该属性来指定 */}
        </Form>
      </Card>
    </div>
  )
}

export default Login
